<template>
	<view>
<!-- 		<view class="box">
			<view :style="{ height: statusBarHeight }" class="uni-status-bar" @touchmove.stop.prevent="stopPenetrate">
			</view>
			<view class="box-nr">
				<view class="box-left" @click="fanHui()">
					<uni-icons type="back" size="30"></uni-icons>
				</view>
				<view class="box-wz">
					亲情监护
				</view>
				<view class="box-right">
					<uni-icons type="more-filled" size="30" @click="zhi()"></uni-icons>
					<view class="tan" v-show="flag">
						<view class="tan-qian">
							
						</view>
						<view class="tan-nr">
							置顶
						</view>
						<view class="tan-nr">
							删除
						</view>
						<view class="tan-nr">
							清空
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 搜索框 -->
	<!-- 	<view class="flex p20">
			<image src="/static/img/index/search.png" mode="widthFix" class=" search-icon"></image>
			<input type="text" placeholder="请输入要查找的信息" class="search" placeholder-style="
			font-size:26rpx;color:#666666;">
		</view>
		<view class="line"></view> -->
		<!-- 申请列表 -->
		<view class="">
			<view class="" v-for="(i,index) in list" :key="index" @click="$pub.go(find_url+'?id='+i.id)">
				<view class="flex " style="height: 200rpx;padding: 30rpx;box-sizing: border-box;">
					<image src="/static/img/index/header-blue.png" mode="widthFix" class="wid55 mr10"></image>
					<!-- /static/img/index/header-blue.png -->
					<view class="f1 wid55-cen">
						<view class="c35 f18">
							亲属{{index+1}}
							<!-- {{i.title}} -->
						</view>
						<view class="f15 c6">
							手机号：{{i.shouji}}
						</view>
					</view>
					<view class="wid55-cen" style="text-align: right;">
						<view class="c6 f14">
							{{i.qinqing}}
						</view>

					</view>
				</view>
				<view class="line"></view>
			</view>

			<view class="z70">

			</view>
		</view>
		<!-- 底部按钮 -->
		<!-- <view class="di  main">
			<button class="btn  btn-big" @click="$pub.go(find_url)">添加监护人</button>
		</view> -->
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
	export default {
		data() {
			return {
				find_url: '/pages_mine/info/jianHu/center/center',
				flag: false,
				statusBarHeight: statusBarHeight,
				list: [
					// 	{
					// 		img: '/static/img/index/header-blue.png',
					// 		title: '亲属1',
					// 		note: '手机号:13823289608',
					// 		date: '本人孩子',
					// 	},
					// 	{
					// 			img: '/static/img/index/header-blue.png',
					// 			title: '亲属2',
					// 			note: '手机号:13823289608',
					// 			date: '本人孩子',
					// 		},
					// {
					// 		img: '/static/img/index/header-blue.png',
					// 		title: '亲属3',
					// 		note: '手机号:13823289608',
					// 		date: '本人孩子',
					// 	},


				]
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			fanHui() {
				console.log(1);
				uni.navigateBack({
					delta: 1 //返回两层页面
				});
			},
			zhi() {
				console.log(1);
				this.flag = !this.flag

			},
			getList() {
				this.request({
					url: '/MyInfo/seleQinqing',
				}).then(res => {
					console.log(res);
					this.list = res.data
				})
			}
		}
	}
</script>
<style lang="less">
	.p20 {
		padding: 200rpx 42rpx 20rpx;
	}

	.box {
		position: fixed;
		top: 0rpx;
		left: 0;
		z-index: 1000;
		width: 100%;
		background-color: #F8662D;
		color: #fff;

		.box-nr {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #F8662D;
			align-items: center;
			font-size: 35rpx;
			position: relative;

			.box-wz {
				// font-size: 3;
				font-weight: 700;
			}

			.box-right {
				position: relative;

				.tan {
					position: absolute;
					z-index: 99;
					left: -106rpx;
					bottom: -266rpx;
					background-color: #3D4043;

					.tan-qian {
						position: absolute;
						left: 104rpx;
						top: -37rpx;
						border: 20rpx solid;
						border-color: transparent transparent #3D4043 transparent;
						width: 0;
						// height: 0;
					}

					.tan-nr {
						padding: 20rpx 40rpx;
						width: 100rpx;
						height: 40rpx;
						border-bottom: 1rpx solid #fff;
						text-align: center;
						color: #fff;
					}
				}
			}
		}
	}
</style>
